What is props drilling in React 🤖

January 11, 2021

Props drilling 🤔

Everything runs on a different thread except our code. We need to share data with different components when working with React. But before I drill deeper, lets first make clear what are props and state. Understanding what props and state are and the differences between them is a big step towards learning React.

What are props?

Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

👉 props data can include numbers, strings, functions, objects, arrays, etc. — to a component when you call on that component. If you have multiple components, you can pass data from one component to another.

To pass props between components, you would add them when the component is called, just as you would pass arguments when calling on a regular JavaScript function.

How do you pass data with props?

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};

This can be achieved in the most basic way using prop drilling. Prop drilling allows for unidirectional data sharing between components. The data passed or shared in the form of props.

Firstly, we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.

<ChildComponent name="First Child" />

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

const ChildComponent = (props) => {  
  // statements
};

And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;

What is state?

React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

class Lesson extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "lesson"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

How to update a component’s state?

State should not be modified directly, but it can be modified with a special method called setState( ).

this.state.id = “2020”; // wrong

this.setState({         // correct  
    id: "2020"
});

What happens when state changes?

why we use setState( )? Why do we even need the state object itself? If you’re asking these questions, don't worry – you’ll understand state soon :) Let me answer.

👉 A change in the state happens based on user-input, triggering an event, and so on. Also, React components (with state) are rendered based on the data in the state. State holds the initial information.

👉 So when state changes, React gets informed and immediately re-renders the DOM – not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.

And how does React get notified? 👉 with setState( ). **ThesetState( )` method triggers the re-rendering process for the updated parts.** React gets informed, knows which part(s) to change, and does it quickly without re-rendering the whole DOM.

🛑 There are 2 important points we need to pay attention to when using state:

👉 State shouldn’t be modified directly – the setState( ) should be used 👉 State affects the performance of the app, and therefore it shouldn’t be used unnecessarily

Can state be used in every component? 🤔

A question about state is where exactly we can use it. Earlier, state could only be used in class components, not in functional components.

That’s why functional components were also known as stateless components. However, after the introduction of React Hooks, state can now be used both in class and functional components.

But if you are not using React Hooks, then you can only use state in class components.

The main differences between props & state are:

👉 Components receive data from outside with props, whereas they can create and manage their own data with state,

👉 Props are used to pass data, whereas state is for managing data

👉 Data from props is read-only, and cannot be modified by a component that is receiving it from outside

👉 State data can be modified by its own component, but is private (cannot be accessed from outside)

👉 Props can only be passed from parent component to child (unidirectional flow) Modifying state should happen with the setState ( ) method

How to share data with different components ? 🤔

This can be achieved in the most basic way using prop drilling. Prop drilling allows for unidirectional data sharing between components. 👉 The data passed or shared in the form of props.

Props are the data we pass or can access, from the top-level components to any number of child components on our website.

👉 Props drilling (threading) refers to the process of passing data from the parent component to the exact child component. _But, _in between, other components owning the props just to pass it down the chain.

class One extends React.Component { 
componentDidMount(){
      console.log(One is mounted);  
   }
   render(){
      <>
         return <Two/>
         <Three/>
      </>
    );
  }
}
      class Two extends React.Component { 
componentDidMount(){
      console.log(Two is mounted);  
   }
   render(){
     
         return <>
              </>   
  }
} 
      class Three extends React.Component { 
componentDidMount(){
      console.log(Three is mounted);  
   }
   render(){
      <>
         return 
         <>
      </>
    );
  }
}

Up next